<template>
    <div class='hearlist'>
       <div class="clscontlist" >
        <div class="clscontlistBottom">
          <van-grid :column-num="3" :border="false">
              <van-grid-item 
              v-for="(item,index) in songs"
              :key="index"
               @click="songsdetail(item.id,item.name)"
              :gutter='5'>
                <van-image 
                :src="item.al.picUrl">
                </van-image >
                <span>{{item.name}}<van-icon size="14" name="play-circle-o" /></span>
              </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
</template>
<script>
import {recsongs} from "../../../api/boke/clstitle"
export default {
    components: {},
    data() {
        return {
            songs:[],
            // id:''
        };
    },
    methods: {
      songsdetail(id){
        this.$router.push({
        path: '/song/url/'+id,
      })  
      }
    },
   async created() {
      const qo = await recsongs({
      cookie: localStorage.cookie,
    })
      this.songs = qo.data.data.dailySongs;
    },
    }
</script>
<style scoped>
  .clscontlist{
    font-size:.28rem;
  }  
   .clscontlistTop{
     overflow:auto; 
     height: .8rem;
   }
   .clscontlistTop span{
    display: inline-block;
    
   }
  .clscontlistTop span:nth-child(1){
    float: left;
    padding: .25rem;
  }
  .clscontlistTop span:nth-child(2){
    float: right;
    border: solid 0.02rem rgb(170, 169, 169);
    border-radius: .2rem;
    margin: .1rem;
    padding:.1rem;
  }
  .clscontlistBottom span{
    color: rgb(162, 162, 164);
    margin-top: .13rem;
    display: inline-block;
    width: 1rem;
    font-size: 0.25rem;
    height: .408933rem;
    line-height: .408933rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  van-image{
   width: 1.386667rem;
   height: 1.386667rem;
  }
 
  /* van-grid-item{
    position: relative;
  }
  van-icon{
    position: absolute;
    top:0;
    left: 0;
  } */
</style>